<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
      input {
        width: 100px;
        height: 25px;
      }
      .main {
        margin-top: 10px;
        width: 400px;
        height: 400px;
      }
      .main input {
        margin-top: 5px;
      }
      p {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <label>基本工资</label>
      <input type="text" v-model.number="a" />
      <br />
      <label>绩效工资</label>
      <input type="text" v-model.number="b" />
      <div :class="calc" style="color: red">
        基本工资{{a}} + 绩效工资{{b}}你的税前工资是:{{result}}
        <p v-show="result<1500">您的工资太少</p>
      </div>
      <div class="main" v-show="result>1500">
        <hr />
        <p>
          <label>养老保险<input type="text" v-model.number="d" /> %</label>
          <span>{{ddd}}</span>
        </p>
        <p>
          <label>医疗保险<input type="text" v-model.number="d1" /> % </label>
          <span>{{ddd1}}</span>
        </p>
        <p>
          <label>工伤保险<input type="text" v-model.number="d2" /> % </label>
          <span>{{ddd2}}</span>
        </p>
        <p>
          <label>生育保险<input type="text" v-model.number="d3" /> % </label>
          <span>{{ddd3}}</span>
        </p>
        <p>
          <label>失业保险<input type="text" v-model.number="d4" /> %</label>
          <span>{{ddd4}}</span>
        </p>
        <p>
          <label
            >公积金&nbsp;&nbsp;&nbsp;<input type="text" v-model.number="d5" />
            %</label
          >
          <span>{{ddd5}}</span>
        </p>
        <hr />
        <p><label>税前工资</label> <span>{{result}}</span></p>
        <p><label>个税</label><span>{{ddd6}}</span></p>
        <p><label>税后工资</label><span>{{ddd7}}</span></p>
      </div>
    </div>
    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          a: 0,
          b: 0,
          d: 8,
          d1: 2,
          d2: 0.5,
          d3: 0,
          d4: 0,
          d5: 8,
          d6: 2.2,
        },
        methods: {},
        computed: {
          calc: function () {
            return (this.result = this.a + this.b);
          },
          ddd: function () {
            return this.calc * (this.d / 100);
          },
          ddd1: function () {
            return this.calc * (this.d1 / 100);
          },
          ddd2: function () {
            return this.calc * (this.d2 / 100);
          },
          ddd3: function () {
            return this.calc * (this.d3 / 100);
          },
          ddd4: function () {
            return this.calc * (this.d4 / 100);
          },
          ddd5: function () {
            return this.calc * (this.d5 / 100);
          },
          ddd6: function () {
            return this.calc * (this.d6 / 100);
          },
          ddd7: function () {
            return (
              this.calc -
              (this.ddd +
                this.ddd1 +
                this.ddd2 +
                this.ddd3 +
                this.ddd4 +
                this.ddd5 +
                this.ddd6)
            );
          },
        },
      });
    </script>
  </body>
</html>
